<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" import="java.util.*"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/jquery/jquery-3.4.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<style type="text/css">
	.table tr th{
		text-align:center;
	} 
	.table tr td {
		height:76px;
		line-height:60px;
		text-align: center;
	}
	.table tr td span{
		height:76px;
		line-height:60px
	} 
	.table tr td .btn{
		line-height:20px;
		margin:0 auto;
		background-color:#0AA5E2;
	}

</style>
</head>
<body>
	<jsp:include page="header.jsp"></jsp:include>
	<div class="clearfix"></div>
	<div class="wrap">
		<div class="main" style="min-height: 600px">
			<div class="container">
				<div class="row clearfix">
					<div class="col-md-12 column">
						<div class="pag-nav">
							<ul class="p-list" style="font-size:24px">
								<li><a href="index.jsp" >首页</a></li>
								<li class="act">|</li>
								<li class="act">出售单页</li>
							</ul>
						</div>
						<form action="order" method="post" class="form-horizontal" id="form_order"
							role="form">
						<div style="min-height: 420.8px;background-color: #D9EDF7"> 
							<table class="table">
						<thead>
							<tr >
								<th style="width:76px;">图片</th>
								<th style="width:114px;" >名称</th>
								<th style="width:214px;">价格</th>
								<th style="width:367px;" >重量</th>
								<th style="width:182px;">总价</th>
								<th style="width:188px;">操作</th>
							</tr>
						</thead>

						<tbody>
							<c:forEach items="${carts}" var="cart" varStatus="status">

								<tr class="info" height="76.8px">
									<td><img class="tb_imgs" src="${cart.pimage}" width="60px"
										height="60px" alt=""> <input type="hidden" value="${cart.pimage}"
										class="form-control" id="pimage" name="pimage" /></td>
									<td><span class="tb_products">${cart.pname }</span> <input
										type="hidden" value="${cart.pname}" class="form-control"
										name="pname" id="pname" /></td>
									<td><span class="tb_products">${cart.pprice}元/kg</span> <input
										type="hidden" value="${cart.pprice}" class="form-control"
										id="pprice" name="pprice" /></td>
									<td>
										<button type="button" class="btn btn-success btn-minus">-</button>
										<span class="tb_products cweight" style="padding: 5px;">${cart.weight}</span>
										<input type="hidden" value="${cart.weight}"
										class="form-control" id="weight" name="weight" />
										<button type="button" class="btn btn-success btn-plus">+</button>
										<input type="hidden" value="${cart.sid}" class="form-control"
										name="sid" id="sid" />
									</td>
									<td><span class="tb_products">${cart.pprice*cart.weight}元</span>
										<input type="hidden" value="${cart.pprice*cart.weight}"
										class="form-control tprice" name="tprice" id="tprice" /></td>
									<td><input type="hidden" value="${cart.pid}"
										class="form-control" name="pid" id="pid" /> <input
										type="hidden" value="${cart.uid}" class="form-control"
										name="uid" id="uid" />
										<button type="button" style="margin-top:12px"  class="btn btn-success btn-del ">删除</button>
									</td>
								</tr>
							</c:forEach>
						</tbody>
					</table>
					</div>
					<%-- ${pageTool} --%>
					<hr/>
							<div class="row">
								<div class="col-sm-6">
									<div class="form-group">
										<label for="inputEmail3" class="col-sm-2 control-label">订单类型</label>
										<div class="col-sm-4">
											<select name="okind" id="okind" class="form-control">
												<option value="tohome">上门服务</option>
												<option value="tostation">送到站点</option>
											</select>
										</div>
									</div>
									<div class="form-group">
										<label for="inputEmail3" class="col-sm-2 control-label">订单地址</label>
										<div class="col-sm-5">
											<input type="text" value="${user.uaddress}" class="form-control"
												name="uaddress" id="i_uaddress" /> 
											<select name="waddress" id="s_uaddress" class="form-control" style="display: none;">
												<option value="无">选择附近的站点地址</option>
												<c:forEach items="${workstations}" var="sta">
													<option value="${sta.waddress}">--- ${sta.waddress} ---</option>
												</c:forEach>
											</select>
										</div>
									</div>

									<div class="form-group">
										<label for="inputPassword3" class="col-sm-2 control-label">预定时间</label>
										<div class="col-sm-8">
											<input type="text" class="form-control" name="destinetime"
												id="destinetime"  />
										</div>
									</div>
								</div>
								<div class="col-sm-6">
									<div class="form-group">
										<label for="inputPassword3" class="col-sm-2 control-label">运费</label>
										<div class="col-sm-6">
											<input type="text" readonly value="0元（暂不收费）" class="form-control"
												id="inputPassword5" />
										</div>
									</div>
									<div class="form-group">
										<label for="inputEmail3" class="col-sm-2 control-label">总计</label>
										<div class="col-sm-4">
											<input type="text" readonly value="" class="form-control"
												name="total" id="total" />

										</div>
									</div>


									<div class="form-group">
										<div class="col-sm-offset-2 col-sm-10">

											<input type="hidden" value="add_user" name="action" />
											<button type="button" style="background-color:#0AA5E2;" id="btn_sell" class="btn btn-success">出售</button>
										</div>
									</div>
								</div>
							</div>

						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="footer">
		<div class="wrap">
			<div class="contact-section">
				<div class="col-md-4 follow text-left">
					<h3>关注我们</h3>
					<p>这里有更多的信息</p>
					<div class="social-icons">
						<i class="twitter"></i> <i class="facebook"></i> <i
							class="googlepluse"></i> <i class="pinterest"></i> <i
							class="linkedin"></i>
					</div>
				</div>
				<div class="col-md-4 subscribe text-left">
					<h3>订阅我们</h3>
					<p>直接在收件箱中获取最新的更新和优惠。</p>
					<input type="text" class="text" value="" onfocus="this.value = '';"
						onblur="if (this.value == '') {this.value = '';}"> <input
						type="submit" value="Subscribe">
				</div>
				<div class="col-md-4 help text-right">
					<h3>需要帮助？</h3>
					<p>这里有更多的信息</p>
					<a href="#">联系我们</a>
				</div>
				<div class="clearfix"></div>
			</div>
			
			<div class="copyright text-center">
				<p>
					2020 All rights reserved by <a href="#"> 扔了吗？</a>
				</p>
			</div> 
		</div>
	</div>

	
	

	<script src="laydate/laydate.js"></script>
	<!-- 改成你的路径 -->
	<script>
		//时间选择器
		laydate.render({
			elem : '#destinetime',
			type : 'datetime'
		});
	</script> 
	<script >
	$(function() {
		//时间选择器
		
		$(".cweight").each(function(index, e) {
			// var weight=parseFloat($(e).html()).toFixed(2);
			var temp = parseFloat($(e).html());
			temp = temp.toFixed(2);
			// alert(temp);
			$(e).html(temp);
		})
		function setTotal() {
			var totalprice = 0.00;
			$(".tprice").each(function(index, e) {
				// console.log(parseFloat($(e).val()));
				totalprice = totalprice + parseFloat($(e).val());
				// console.log(totalprice);
			})
			$("#total").val(totalprice);
		}
		setTotal();

		$(".btn-plus").click(function() {
			// alert($(this).html());
			// 获取页面的重量值和input隐藏的vlaue
			// span标签值
			var span = $(this).prev().prev();
			var value = (parseFloat(span.html()));
			// input隐藏的vlaue()值
			var inp = span.next();
			// 处理重量+1
			value = (value + 1.00).toFixed(2);
			//alert(value);
			// 赋值
			span.html(value);
			inp.val(value);

			console.log(span.html()+" : "+ inp.val)
			// 获取单价
			var price = span.parent().prev().children(".form-control");
			// 获取该条记录总价
			var tprice = span.parent().next().children(".form-control");
			// console.log(price.val()+" : "+tprice.val())

			tprice.val((value * parseFloat(price.val())).toFixed(2));
			// console.log(price.val()+" : "+tprice.val())
			// 修改单条记录总价
			tprice.prev().html(tprice.val() + "元");

			setTotal();
			$.ajax({
				url : "cart?action=updateWeight",
				type : "post",
				data : {
					"yunsuan" : "+",
					"sid" : $(this).next().val()
				},
				dataType : "text",
				success : function(result) {
					if (result == '1') {

					} else {
						alert("未改变成功！");
					}
				},
				error : function() {
					alert("系统发生错误，请联系管理员！");
				}
			})

		})

		$(".btn-minus").click(function() {

			// 获取页面的重量值和input隐藏的vlaue
			// span标签值
			var span = $(this).next();
			var value = (parseFloat(span.html()));
			// input隐藏的vlaue()值
			var inp = span.next();
			if (value <= 1.00) {
				return;
			}
			// 处理重量+1
			value = (value - 1.00).toFixed(2);
			// 赋值
			span.html(value);
			inp.val(value);

			// console.log(span.html()+" : "+ inp.val)
			// 获取单价
			var price = $(this).parent().prev().children(".form-control");
			// 获取该条记录总价
			var tprice = $(this).parent().next().children(".form-control");
			// console.log(price.val()+" : "+tprice.val())

			tprice.val((value * parseFloat(price.val())).toFixed(2));
			// console.log(price.val()+" : "+tprice.val())
			// 修改单条记录总价
			tprice.prev().html(tprice.val() + "元");
			setTotal();
			$.ajax({
				url : "cart?action=updateWeight",
				type : "post",
				data : {
					"yunsuan" : "-",
					"sid" : $(this).next().next().next().next().val()
				},
				dataType : "text",
				success : function(result) {
					if (result == '1') {

					} else {
						alert("未改变成功！");
					}
				},
				error : function() {
					alert("系统发生错误，请联系管理员！");
				}
			})

		})
		$("#btn_sell").click(function() {
			var time=$("#destinetime").val();
			if(time==null || time==""){
				alert("请选择预定时间！");
				return false;
			}
			if($("#total").val()=="0"){
				alert("请添加要出售的物品！");
				return false;
			}
			var msg = "您真的确定要出售吗？\n\n请确认！"; 
			if (confirm(msg)==false)  return false; 
			$("#form_order").submit();
			
			
		})
		$(".btn-del").click(function() {
			var msg = "您真的确定要删除吗？\n\n请确认！"; 
			if (confirm(msg)==false)  return false; 
			var s = $(this).parent().prev().prev().children(".form-control:last").val();
			//alert($(this).parent().parent().html());
			$(this).parent().parent().remove();
			$.ajax({
				url : "cart?action=delete",
				type : "post",
				data : {
					"sid" : s
				},
				dataType : "text",
				success : function(result) {
					if (result == '1') {
						// $(this).parent().parent().remove();
						//alert("删除成功！");
					} else {
						alert("未改变成功！");
					}
				},
				error : function() {
					alert("系统发生错误，请联系管理员！");
				}
			})
			setTotal();
		})

		$(document).ready(function() {
			// alert($("#select_id").val())
			$("#okind").change(function() {
				var selected = $(this).val();
				// alert(selected);
				if (selected == "tohome") {
					// document.getElementById("search_content_id").
					$("#s_uaddress").css({
						"display" : "none"
					});
					$("#i_uaddress").css({
						"display" : "inline"
					});

				} else if (selected == "tostation") {
					$("#s_uaddress").css({
						"display" : "inline"
					});
					$("#i_uaddress").css({
						"display" : "none"
					});
				}
			});

		});
	})
	</script> 
	

</body>
</html>